<template>
    <div :class="`mmv-user-card-${size}`" class="mmv-user-card">
        <mmv-link :to="accountCenterPath" class="mmv-user-caard__link" target="_blank">
            <mmvAvatar :size="size" class="mmv-user-card__avatar" is_official></mmvAvatar>
        </mmv-link>
        <div class="mmv-user-card__info">
            <mmvAccountTitle class="mmv-user-card__link"></mmvAccountTitle>
        </div>
        <template v-if="followBtn">
            <mmvFollowButton :is_following="false" :uid="1" class="mmv-user-card__follow"></mmvFollowButton>
        </template>
    </div>
</template>

<script>
import mmvAvatar from "@/components/mmv-avatar.vue";
import mmvAccountTitle from "@/components/mmv-account-title.vue";
import mmvFollowButton from "@/components/mmv-follow-button.vue";

export default {
    name: "mmv-user-card",
    components: {
        mmvAvatar,
        mmvAccountTitle,
        mmvFollowButton,
    },
    props: {
        followBtn: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: "xs",
        },
    },
    computed: {
        accountCenterPath() {
            return `/accountCenter?id=${1}`;
        },
    },
};
</script>

<style lang="less">
.mmv-user-card {
    display: flex;
    align-items: center;
    &__link {
        color: #666;
        display: inline-flex;
        align-items: center;
        &:hover {
            color: #00c3ff;
        }
    }
    &__avatar {
        flex-shrink: 0;
    }
    &-lg &__avatar {
        font-size: 18px;
        .mmv-avatar__auth {
            right: 0;
        }
    }
    &__info {
        display: inline-block;
        margin-left: 10px;
        flex-grow: 1;
        overflow: hidden;
    }
    &-lg &__info {
        margin-left: 20px;
    }
    &__certification {
        color: #999;
        font-size: 12px;
        line-height: 18px;
    }
    &-lg &__certification {
        font-size: 14px;
    }
    &__intro {
        line-height: 20px;
        color: #ccc;
    }
    &__certification,
    &__intro {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &__follow {
        flex-shrink: 0;
    }
}
</style>